<template>
  <div class="app-container">
    <div ref="action-container" class="action-container">
      <el-form ref="queryForm" :model="queryParams" size="small" :inline="true">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="queryParams.content" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="handleDelete(selectedList.map(item => item.id).join(','))">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-table
        v-if="tableHeight"
        v-loading="loading"
        :data="list"
        border
        :height="tableHeight"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="phone"
          label="手机"
          width="180"
        />
        <el-table-column
          prop="email"
          label="邮箱"
          width="180"
        />
        <el-table-column
          prop="content"
          label="内容"
        />
        <el-table-column
          prop="ip"
          label="ip"
        />
        <el-table-column
          prop="create_date"
          label="提交时间"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="143"
        >
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div ref="pagination-container" class="pagination-container">
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </div>
  </div>
</template>

<script>
import * as messageApi from '@/api/message'
import { mixins } from '@/mixins'
export default {
  mixins: [mixins],
  data() {
    return {
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        content: ''
      },
      list: [],
      selectedList: [],
      total: 0
    }
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    handleSelectionChange(rows) {
      this.selectedList = rows
    },
    handleDelete(id) {
      this.$confirm('是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        messageApi.del({ id: id }).then(() => {
          this.handleQuery()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
      })
    },
    async handleQuery() {
      this.loading = true
      try {
        const { data } = await messageApi.getList(this.queryParams)
        this.list = data.data
        this.total = data.total
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 15,
        username: ''
      }
      this.handleQuery()
    }
  }
}
</script>

<style scoped lang="scss">

</style>

